<script setup lang="ts">
import ByIcon from "./ByIcon.vue";

defineProps<{
  label: string;
  labelWidth?: string;
  labelClass?: string;
  align?: "left" | "right";

  icon?: string;
  next?: boolean;
}>();
</script>

<template>
  <view :class="['flex items-center py-1']">
    <ByIcon v-if="icon" :name="icon" class="mr-2" :size="36" />

    <text class="flex-none mr-2 text-second" :style="{ width: labelWidth }">
      {{ label }}
    </text>

    <view
      class="flex-auto min-w-0"
      :class="{
        'text-left': align == 'left',
        'text-right': align == 'right',
      }"
    >
      <slot />
    </view>

    <ByIcon v-if="next" class="ml-1" name="ArrowRight" :size="22" />
  </view>
</template>
